<template>
  <container @onresize="onresize">
    <toolbar :left='[{key:"add",icon:"el-icon-plus",name:"新增"}]' :right='[{key:"query",icon:"el-icon-search",name:"查询"}]' @trigger="menuClick"/>
    <el-table
      :data="modelData.list"
      :max-height="maxHeight"
       v-loading="isLoad"
      stripe
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        width="50">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        label="操作">
        <template scope="scope">
          <el-button type="primary" size="mini" @click="modify(scope.row.id)">修改</el-button>
          <el-button size="mini" @click="delTest(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </container>
</template>

<script lang="ts">
import Vue from 'vue';
import * as module from '../index.model';
import {TestModify} from '../index';
export default Vue.proxyVue({
  module,
  init(initData){
    return {
      maxHeight:0,
      isLoad:true,
      modelData:initData
    };
  },
  mounted(){
    this.trigger.fetchList().then(()=>{
      this.isLoad=false;
    })
  },
  methods:{
    onresize({h}:{h:number}){
      this.maxHeight = h -40;
    },
    modify(id?:string){
      this.$api.openModel({
        title:id==null?"新增":"修改",
        id:"test",
        type:"comp",
        width:400,
        height:200,
        resizable:false,
        extData:{
          comp:TestModify,
          params:{id},
          message:()=>{
            console.log(arguments);
          }
        }
      });
    },
    menuClick({type}:{type:string}){
      switch(type){
        case 'query':
          this.isLoad=true;
          this.trigger.fetchList().then(()=>{
            this.isLoad=false;
          })
          break;
        case 'add':
          this.modify();
          break;
      }
    },
    delTest({name,id}:{name:string,id:string}){
      this.$confirm(`删除 ${name} 记录, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.trigger.delTest([id]).then(flag=>{
          if(flag){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    }
  }
})
</script>

<style lang="less" scoped>
</style>
